<!DOCTYPE html>
<html><!--
	This is a jQuery Tools standalone demo. Feel free to copy/paste.
	                                                         
	http://flowplayer.org/tools/demos/
	
	Do *not* reference CSS files and images from flowplayer.org when in production  

	Enjoy!
--><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>jQuery Tools standalone demo</title>

	<!-- include the Tools -->
	<script src="tab_css/jquery.js"></script>
	 

	<!-- standalone page styling (can be removed) -->
	<link rel="stylesheet" type="text/css" href="tab_css/standalone.css">	


	<!-- tab styling -->	
	<link rel="stylesheet" type="text/css" href="tab_css/tabs-no-images.css"> 
</head>

<body>

<!-- tabs -->
<ul class="css-tabs">
	<li><a class="current" href="#">Tab 1</a></li>
	<li><a href="#">Second tab</a></li>
	<li><a href="#">A ultra long third tab</a></li>
</ul>

<!-- panes -->
<div class="css-panes">

	<div style="display: block;">
		<p>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis 
viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in 
accumsan purus magna imperdiet sem.
    </p>
		
		<p>
			Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas 
facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh 
metus, faucibus quis, semper ut, dignissim id, diam. 
		</p>			
	</div>
	
	<div style="display: none;">
		<p>
			Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, 
molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, 
nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam 
vitae dui.
		</p> 
		<p>
			Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. 
Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. 
Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
		</p>
	</div>
	
	<div style="display: none;">
		<p>
			Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed
 justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque
 penatibus et magnis dis parturient montes, nascetur ridiculus mus.
		</p>
		
		<p>
			In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam 
vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus 
rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer 
semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, 
vestibulum vitae, velit.
		</p>
	</div>
</div>

<!-- activate tabs with JavaScript -->
<script>
$(function() {
	// :first selector is optional if you have only one tabs on the page
	$(".css-tabs:first").tabs(".css-panes:first > div");
});
</script>


</body></html>